<template>
  <div>
    <div>
      <el-date-picker
        v-model="begin"
        type="date"
        placeholder="请选择开始日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
      -
      <el-date-picker
        v-model="end"
        type="date"
        placeholder="请选择截止日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    <div>
      <el-button type="primary" @click="handleSelect">查询</el-button>
    </div>
    <div>
      <div ref="echart" style="width:70%;height:500px"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import { GetOrderStatistics } from '@/api/orderStatistics'

let begin = ref()
let end = ref()
let echart = ref()
let handleSelect = async () => {
  const { data } = await GetOrderStatistics(begin.value, end.value)

  var myChart = echarts.init(echart.value) //main.value代表渲染柱形图的标签
  var option = {
    title: {
      text: '尚品甄选订单统计数据',
      subtext: '每日订单总金额',
    },
    xAxis: {
      type: 'category',
      data: data.dateList,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: data.totalAmountList,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }

  option && myChart.setOption(option)
}
</script>
